<template>
  <el-config-provider :z-index="zIndex">
    <el-container>
      <el-header class="header-nav-bar">
        <HeaderNavBar @navChange="navChange" />
      </el-header>
      <el-main>
        <router-view :nav-index="navIndex" />
      </el-main>
    </el-container>
  </el-config-provider>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { ElConfigProvider } from 'element-plus'
import HeaderNavBar from './components/headerNavBar.vue'

export default defineComponent({
  components: {
    ElConfigProvider,
    HeaderNavBar
  },
  setup() {
    const navIndex = ref('1')
    const navChange = (val)=> {
      navIndex.value = val
    }

    return {
      navIndex,
      navChange,
      zIndex: 3000
    }
  }
})
</script>

<style>
    body {
        margin: 0 auto;
        padding: 0 auto;
        background-color: #f7f7f7;
        color: #333;
    }

    a {
        text-decoration: none;
        color: #1985a0;
    }

    a:hover {
        text-decoration: underline;
        color: #f47a56;
    }

    .header-nav-bar {
        padding: 0;
    }
    .el-main {
        height: calc(100vh - 60px);
    }
    .el-message {
        position: fixed;
        top: 50%!important;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .el-table .cell {
        height: 23px;
    }
</style>
